<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Gasoline Statistics</title>
<link href="/style/gastics.css" rel="stylesheet" type="text/css" />
<link href="/style/CalendarControl.css" rel="stylesheet" type="text/css">
<script src="/js/CalendarControl.js" language="javascript"></script>
<SCRIPT language="JavaScript">
		function OnSubmitForm(action,curitem)
		{
			if(action == 'Save')
			{
				var date = document.getElementById("date").value;
				var currentkilo = document.getElementById("currentkilo").value;
				var percost = document.getElementById("percost").value;
				var price = document.getElementById("price").value;
				var lastk = document.getElementById("lastk").value;
				var ccur = document.getElementById("curitem").value;
				
			  	if (date == "" || currentkilo == "" || percost == "" || price == "") {
					alert("These fields must not be empty!");
				} else if (!currentkilo.match(/^\d+$/)) {
					alert("Field must be a number!");
				} else if ((parseFloat(percost)=="NaN")||(parseFloat(price)=="NaN")) {
					alert("Field must be a real number!");
				} else if (parseInt(lastk) >= parseInt(currentkilo) && ccur == '') {
					alert("Please enter a valid K number!");					}
				else {
				  	document.getElementById("actiontype").value = "Save";
				  	document.forms[0].action ="/";
				  	document.forms[0].submit();		
			  	}
			}
			else if (action == 'Clear')
			{
			  	document.getElementById("actiontype").value = "Clear";
			  	document.forms[0].action ="/";
			  	document.forms[0].submit();		
			} 
			else if (action == 'Edit')
			{
				document.getElementById("actiontype").value = "Edit";
				document.getElementById("curitem").value = curitem;

			  	document.forms[0].action ="/";
			  	document.forms[0].submit();		
			}
			else if (action == 'Delete')
			{
				var returned = window.confirm("删除数据可能导致不准确的油耗数据，确定吗？");
				if (returned)
				{
					document.getElementById("actiontype").value = "Delete";
					document.getElementById("curitem").value = curitem;

					document.forms[0].action ="/";
					document.forms[0].submit();	
				}				
			}
			 
		}
	</SCRIPT>
</head>
<body>
<form id="MainForm" method="POST">
<table style="margin:0 auto;width:100%">
<tr><td>
{{ header }}
</td>
</tr>

<tr><td height="20px"></td></tr>
<tr><td>
<div id="Body">

<div id="content">

<table class="ae-table">
<thead><tr><th>日期</th>
<th>里程(km)</th>
<th>金额</th>
<th>价格</th>
<th>容量</th>
<th>油耗</th>
<th>操作</th></tr></thead>
<tbody>{{ dataGrid }}</tbody>
<tfoot></tfoot>
</table>
<br>
<table class="ae-table">
<thead><tr><th>图表（当您至少输入三条有效数据后图表才能正确显示）</th>
</tr></thead>
<tbody><tr><td><img src="http://chart.apis.google.com/chart?
cht=lc
&chs=450x160
&chd=t:{{ chartvalues }}
&chco=224499
&chxt=x,y
&chxl=0:{{ y }}1:|5|7|9|11|13
&chm=B,76A4FB,0,0,0" /></td></tr>
</tbody>
<tfoot></tfoot>
</table>

</div>

<div id="carinfo">
<table class="ae-table"><thead><tr><th><label id="operTitle">您的车型</label></th></tr></thead><tbody>
<tr><td><select id="carmodel">
	<option selected="true">Golf 1.6</option>
	<option>Polo 1.4</option>
	<option>BMW 2.0</option>
	<option>Ford 1.8</option>
</select></td></tr>
</tbody></table>
</div>

<div id="input">
<table class="ae-table"><thead><tr><th><label id="operTitle">{{ opertitle }}</label></th></tr></thead><tbody>

<tr><td><b>加油日期：</b></td></tr>
<tr><td><input id="date" name="date" onfocus="showCalendarControl(this);" readonly=true type=text value='{{ editDay }}'/></td></tr>
<tr><td><b>当天里程数（公里）：</b></td></tr>
<tr><td><input id="currentkilo" name="currentkilo" type=text value='{{ editK }}'/></td></tr>
<tr><td><b>金额（元）：</b></td></tr>
<tr><td><input id="percost" name="percost" type=text value='{{ lastcost }}'/></td></tr>
<tr><td><b>价格（元/升）：</b></td></tr>
<tr><td><input id="price" name="price" type=text value='{{ lastprice }}'/></td></tr>


<tr><td colspan="2">
<A class="btn onbtn goog-ws-create-page" href="javascript:OnSubmitForm('Save','');">
<B><B><B><B style="FONT-WEIGHT: bold! important">
<IMG style="PADDING-RIGHT: 12px! important; BACKGROUND-POSITION: 0px 0px; PADDING-LEFT: 0px! important; BACKGROUND-IMAGE: url(/images/icon_sprites.gif); PADDING-BOTTOM: 0px! important; WIDTH: 0px; PADDING-TOP: 13px! important; HEIGHT: 0px" align="left" />保存数据</B></B></B></B> </A>
<A class="btn onbtn goog-ws-create-page" href="javascript:OnSubmitForm('Clear','');">
<B><B><B><B style="FONT-WEIGHT: bold! important">
<IMG style="PADDING-RIGHT: 12px! important; BACKGROUND-POSITION: 0px 0px; PADDING-LEFT: 0px! important;  PADDING-BOTTOM: 0px! important; WIDTH: 0px; PADDING-TOP: 13px! important; HEIGHT: 0px" align="left" />清除数据</B></B></B></B> </A>

<input id="actiontype" name="actiontype" type="hidden"/>
<input id="curitem" name="curitem" type="hidden" value='{{ curitem }}'/>
<input id="lastk" name="lastk" type="hidden" value='{{ lastk }}'/>
</td></tr>

</tbody></table>
<br>
<table class="ae-table">
<thead><tr><th>日历</th>
</tr></thead>
<tbody><tr><td><iframe src="http://www.google.com/calendar/embed
								?height=300&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=zhao.zhongming%40gmail.com&amp;color=%232952A3&amp;ctz=Asia%2FShanghai" 
								style=" border-width:0 " width="360px" height="300px" frameborder="0" scrolling="no"></iframe></td></tr>
</tbody>
<tfoot></tfoot>
</table>

</div>

</div> 

</td></tr>




<tr><td>

{{ footer }}

</td></tr>
</table>
</form>
<SCRIPT language="JavaScript">

for (var i=0; i < document.forms[0].carmodel.length; i++) 
{
	if (document.forms[0].carmodel[i].value == '{{ carselected }}') 
	{
		document.forms[0].carmodel[i].selected = true;
	}
}
</SCRIPT> 
</body>
</html>